<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no, email=no" />
  <meta charset="UTF-8">
  <title>中智谷官网</title>
  <link rel="stylesheet" href="css/public.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
      text-decoration: none;
    }

    #banner {
      width: 1920px;
      height: 400px;
      overflow: hidden;
      border: 2px solid #999;
      position: relative;
    }

    #banner img {
      width: 1920px;
      height: 400px;
    }

    #imglist {
      width: 9600px;
      height: 400px;
    }

    #imglist li {
      float: left;
    }

    #icolist {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }

    #icolist li {
      float: left;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #666;
      color: #fff;
      margin-left: 5px;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
    }

    .prev {
      background: #666;
      height: 40px;
      width: 30px;
      position: absolute;
      left: 5px;
      top: 45%;
      color: #fff;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
    }

    .next {
      background: #666;
      height: 40px;
      width: 30px;
      position: absolute;
      right: 5px;
      top: 45%;
      color: #fff;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
    }

    #solutionCanverRoot {
      width: 100%;
      display: none;
      align-self: center;
      justify-self: center;
      position: fixed;
      top: 40px;
      z-index: 99;
    }

    #soulutionCanver {
      margin-left: 482px;
      background-color: #fff;
      width: 7%;
      display: flex;
      justify-self: center;
      flex-direction: column;
      align-self: center;
    }

    #soulutionCanver li {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
    }

    #solutionBtn {}
    /* centerCanverRoot */
    #centerCanverRoot {
      width: 100%;
      display: none;
      align-self: center;
      justify-self: center;
      position: fixed;
      top: 40px;
      z-index: 99;
    }

    #centerCanver {
      margin-left: 632px;
      background-color: #fff;
      width: 8%;
      display: flex;
      justify-self: center;
      flex-direction: column;
      align-self: center;
    }

    #centerCanver li {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
    }

    #centerBtn {}
  </style>
</head>
<body>
<div style="width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;">
  <div
          style="width: 1920px;height: 60px;display: flex;align-items: center;flex-direction: row; background-color: white;">
    <!-- Logo -->
    <img src="img/logo.png"
         style="max-width: 40px;max-height: 40px;width: auto;height: auto;margin-left: 15px;" alt="">
    <!-- 标语 -->
    <span
            style="font-size: 18px;font-weight: 600;margin-left: 18px; color: #FE5653;font-family: Kaiti;">中智谷</span>

    <!-- 分类 -->
    <div
            style="width: 50%;height: 60px;display: flex;align-items: center;flex-direction: column; background-color: white;margin-left: 200px;">
      <!-- 条目 -->
      <div style="width: 100%;height: 60px;display: flex;align-items: center;flex-direction: row;">
        <a href="http://127.0.0.1:8848/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/home.html"
           style="color: #4ca41f;width: 16%;height: 100%;">
          <div style="width: 100%;height: 100%;">
            <!-- 首页 -->
            <div style="width: 100%;height: 55px;display: flex;align-items: center;justify-content: center;color: #4ca41f;"
                 onclick="window.location.href= 'home.html';return false">
              首页</div>
            <!-- 条状 -->
            <div style="width: 100%;height: 5px;background-color: #4ca41f;"></div>
          </div>
        </a>
        <!-- 解决方案 -->
        <a href="http://127.0.0.1:8848/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/solution.html"
           style="color: #000;width: 18%;height: 100%;display: flex;flex-direction: column;">
          <div style="width: 100%;height: 100%;">
            <!-- 解决方案 -->
            <div style="width: 100%;height: 55px;display: flex;align-items: center;justify-content: center;flex-direction: row;"
                 id="solutionBtn">
              <span onclick="window.location.href= 'solution.html';return false">解决方案</span>
              <img src="img/arrow-right.png"
                   style="max-width: 12px;max-height: 12px;width: auto;height: auto;margin-left: 3px;"
                   alt="">
            </div>
            <!-- 条状 -->
            <div style="width: 100%;height: 5px;background-color: #f0f0f0;"></div>
          </div>
        </a>
        <!-- 产品中心 -->
        <a href="http://127.0.0.1:8848/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/products.html"
           style="color: #000;width: 18%;height: 100%;">
          <div style="width: 100%;height: 100%;">
            <!-- 产品中心 -->
            <div
                    style="width: 100%;height: 55px;display: flex;align-items: center;justify-content: center;color: #;flex-direction: row;"
                    id="centerBtn">
              <span onclick="window.location.href= 'products.html';return false">产品中心</span>
              <img src="img/arrow-right.png"
                   style="max-width: 12px;max-height: 12px;width: auto;height: auto;margin-left: 3px;"
                   alt="">
            </div>
            <!-- 条状 -->
            <div style="width: 100%;height: 5px;background-color: #f0f0f0;"></div>
          </div>
        </a>
        <!-- 新闻资讯 -->
        <a href="http://127.0.0.1:8848/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/news.html"
           style="color: #000;width: 16%;height: 100%;">
          <div style="width: 100%;height: 100%;">
            <!-- 新闻资讯 -->
            <div style="width: 100%;height: 55px;display: flex;align-items: center;justify-content: center;color: #000;"
                 onclick="window.location.href= 'news.html';return false">
              新闻资讯</div>
            <!-- 条状 -->
            <div style="width: 100%;height: 5px;background-color: #f0f0f0;"></div>
          </div>
        </a>
        <!-- 关于我们 -->
        <a href="http://127.0.0.1:8848/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/about.html"
           style="color: #000;width: 16%;height: 100%;">
          <div style="width: 100%;height: 100%;">
            <!-- 关于我们 -->
            <div style="width: 100%;height: 55px;display: flex;align-items: center;justify-content: center;color: #000;"
                 onclick="window.location.href= 'about.html';return false">
              关于我们</div>
            <!-- 条状 -->
            <div style="width: 100%;height: 5px;background-color: #f0f0f0;"></div>
          </div>
        </a>
        <!-- 联系我们 -->
        <a href="http://127.0.0.1:8848/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/conact.html"
           style="color: #000;width: 16%;height: 100%;">
          <div style="width: 100%;height: 100%;">
            <!-- 联系我们 -->
            <div style="width: 100%;height: 55px;display: flex;align-items: center;justify-content: center;color: #000;"
                 onclick="window.location.href= 'conact.html';return false">
              联系我们</div>
            <!-- 条状 -->
            <div style="width: 100%;height: 5px;background-color: #f0f0f0;"></div>
          </div>
        </a>
      </div>
    </div>


    <!-- 搜索框 -->
    <div
            style="width: 20%;height: 32px;border: 1px solid #4ca41f;border-radius: 20px;margin-left: 175px;display: flex;align-items: center;flex-direction: row;">
      <!-- 搜索框图标 -->
      <img src="img/search-gray.png"
           style="max-width: 24px;max-height: 24px;width: auto;height: auto;margin-left: 10px;" alt="">
      <!-- 输入框 -->
      <input type="text" style="width: 80%;height: 70%;border:none;" placeholder="输入你想查找的">
    </div>
    <div>&nbsp;&nbsp;&nbsp;</div>
    <div>
      <img src="img/中英文切换.svg" alt="" onclick="window.location.href= 'en-home.html';return false">
    </div>
  </div>

  <div id="solutionCanverRoot">
    <div style="width: 1920px;display: flex;flex-direction: row;">
      <!-- 解决方案的下拉菜单 -->
      <ul id="soulutionCanver">
        <li><a
                href="http://127.0.0.1:8848/zjb/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/solu1.html" style="color: #000;">方案一</a>
        </li>
        <li><a
                href="http://127.0.0.1:8848/zjb/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/solu2.html" style="color: #000;">方案二</a>
        </li>
        <li><a
                href="http://127.0.0.1:8848/zjb/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/solu3.html" style="color: #000;">方案三</a>
        </li>
        <li><a
                href="http://127.0.0.1:8848/zjb/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/solu4.html" style="color: #000;">方案四</a>
        </li>
        <li><a
                href="http://127.0.0.1:8848/zjb/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/solu5.html" style="color: #000;">方案五</a>
        </li>
      </ul>
    </div>
  </div>

  <!-- 产品中心 -->
  <div id="centerCanverRoot">
    <div style="width: 1920px;display: flex;flex-direction: row;">
      <!-- 产品中心的下拉菜单 -->
      <ul id="centerCanver">
        <li><a
                href="http://127.0.0.1:8848/zjb/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/pro1.html" style="color: #000;">LED线路牌</a>
        </li>
        <li><a
                href="http://127.0.0.1:8848/zjb/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/pro2.html" style="color: #000;">LED屏配件（OEM）</a>
        </li>
        <li><a
                href="http://127.0.0.1:8848/zjb/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/pro3.html" style="color: #000;">LCD导程屏</a>
        </li>
        <li><a
                href="http://127.0.0.1:8848/zjb/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/%E4%B8%AD%E6%99%BA%E8%B0%B7%E5%AE%98%E7%BD%911/pro4.html" style="color: #000;">报站器</a>
        </li>
      </ul>
    </div>
  </div>

  <!-- 首页轮播图 -->
  <div id="banner">
    <ul id="imglist">
      <li><a href=""><img src="http://www.ledzzg.com/Uploads/202108/612d8a93608f5.jpg" alt=""></a></li>
      <li><a href=""><img src="http://www.ledzzg.com/Uploads/202108/612d8b7772aee.jpg" alt=""></a></li>
      <li><a href=""><img src="http://www.ledzzg.com/Uploads/202109/612f4c75a88cf.jpg" alt=""></a></li>
      <li><a href=""><img src="http://www.ledzzg.com/Uploads/202108/612c550ba2d65.jpg" alt=""></a></li>
      <li><a href=""><img src="http://www.ledzzg.com/Uploads/202108/612d8a93608f5.jpg" alt=""></a></li>
    </ul>

    <ul id="icolist">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <div class="prev">《</div>
    <div class="next">》</div>
  </div>
  <div id="test"></div>

  <!-- 产品介绍标题 -->
  <div
          style="width: 1920px;height: 180px;background-color: white;display: flex;align-items: center;justify-content: center;flex-direction: column;">
    <span style="font-size: 150px;font-weight: 600; color: #f0f0f0;">PRODUCTS</span>
    <!-- 绿色 -->
    <span
            style="align:center;color: #4ca41f;font-weight: 500;z-index: 2;font-size: 30px; margin-top: -70px;">产品介绍</span>
  </div>

  <!-- 产品介绍内容 -->
  <div
          style="width: 1920px;height: 350px;display: flex;align-items: center;justify-content: center;background-color: white;margin-top: 50px;">
    <!-- 图片一 -->
    <div
            style="width: 35%;height: 350px;display: flex;align-items: center;justify-content: center;flex-direction: column;font-size: 0; background-color: white;box-shadow: 1px 1px 1px 1px #aaa;">
      <img src="img/产品介绍/LED线路牌.jpg" style="max-width: 100%;width: auto;height: 290px;" alt="">
      <div style="width: 100%;height: 60px;display: flex;align-items: center;flex-direction: row;">
        <span style="margin-left: 15px;font-size: medium;">LED线路牌</span>
        <!-- <img src="" alt=""> -->
      </div>
    </div>
    <!-- 图片二 -->
    <div
            style="width: 35%;height: 350px;margin-left: 12%; display: flex;align-items: center;justify-content: center;flex-direction: column;font-size: 0; background-color: white;box-shadow: 1px 1px 1px 1px #aaa;">
      <img src="img/产品介绍/报站器.jpg" style="max-width: 100%;width: auto;height: 290px;" alt="">
      <div style="width: 100%;height: 60px;display: flex;align-items: center;flex-direction: row;">
        <span style="margin-left: 15px;font-size: medium;">报站器</span>
      </div>
    </div>
  </div>

  <div
          style="width: 1920px;height: 350px;display: flex;align-items: center;justify-content: center;background-color: white;margin-top: 50px;">
    <!-- 图片三 -->
    <div
            style="width: 35%;height: 350px;display: flex;align-items: center;justify-content: center;flex-direction: column;font-size: 0; background-color: white;box-shadow: 1px 1px 1px 1px #aaa;">
      <img src="img/产品介绍/LCD导程屏.jpg" style="max-width: 100%;width: auto;height: 290px;" alt="">
      <div style="width: 100%;height: 60px;display: flex;align-items: center;flex-direction: row;">
        <span style="margin-left: 15px;font-size: medium;">LED导程屏</span>
        <!-- <img src="" alt=""> -->
      </div>
    </div>
    <!-- 图片四 -->
    <div
            style="width: 35%;height: 350px;margin-left: 12%; display: flex;align-items: center;justify-content: center;flex-direction: column;font-size: 0; background-color: white;box-shadow: 1px 1px 1px 1px #aaa;">
      <img src="img/产品介绍/LED屏配件.jpg" style="max-width: 100%;width: auto;height: 290px;" alt="">
      <div style="width: 100%;height: 60px;display: flex;align-items: center;flex-direction: row;">
        <span style="margin-left: 15px;font-size: medium;">LED屏配件</span>
      </div>
    </div>
  </div>

  <!-- 关于中智谷 -->
  <div style="width: 1920px;margin-top: 60px;">
    <img src="img/产品介绍/X0FUIP(4QIVRO)V`XGKK20S.png" style="width: 100%;" alt="">
  </div>

  <!-- 中智谷公司项目标题 -->
  <div
          style="width: 1920px;height: 180px;background-color: white;display: flex;align-items: center;justify-content: center;flex-direction: column;">
    <span style="font-size: 150px;font-weight: 600; color: #f0f0f0;">PROJECTS</span>
    <!-- 绿色 -->
    <span
            style="align:center;color: #4ca41f;font-weight: 500;z-index: 2;font-size: 30px; margin-top: -70px;">中智谷公司项目</span>
  </div>



  <!-- 中智谷公司项目内容部分 -->
  <div
          style="width: 1920px;display: flex;align-items: center;justify-content: center;margin-top: 70px;flex-direction: column;">
    <!-- 第一行 -->
    <div
            style="width: 100%; display: flex;flex-direction: row;align-items: center;justify-content: center;">
      <!-- 1 -->
      <div
              style="width: 28%;height: 340px;display: flex;flex-direction: column;align-items: center;justify-content: center;flex-shrink: 0;box-shadow: 0px 0px 1px 1px #aaa;">
        <a style="color: #000;width: 100%;">
          <img src="img/南美洲.jpg" style="width: 100%;height: 280px;" alt="">
          <div style="width: 100%;height: 60px;display: flex;align-items: center;">
            <span style="font-size: medium;margin-left: 25px;">南美洲</span>
          </div>
        </a>
      </div>
      <!-- 2 -->
      <div
              style="margin-left: 5%; width: 28%;height: 340px;display: flex;flex-direction: column;align-items: center;justify-content: center;flex-shrink: 0;box-shadow: 0px 0px 1px 1px #aaa;">
        <img src="img/南非.jpg" style="width: 100%;height: 280px;" alt="">
        <div style="width: 100%;height: 60px;display: flex;align-items: center;">
          <span style="font-size: medium;margin-left: 25px;">南非</span>
        </div>
      </div>
      <!-- 3 -->
      <div
              style="margin-left: 5%; width: 28%;height: 340px;display: flex;flex-direction: column;align-items: center;justify-content: center;flex-shrink: 0;box-shadow: 0px 0px 1px 1px #aaa;">
        <img src="img/印度.jpg" style="width: 100%;height: 280px;" alt="">
        <div style="width: 100%;height: 60px;display: flex;align-items: center;">
          <span style="font-size: medium;margin-left: 25px;">印度</span>
        </div>
      </div>
    </div>
    <!-- 第二行 -->
    <div
            style="width: 100%; display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 80px;">
      <!-- 4 -->
      <div
              style="width: 28%;height: 340px;display: flex;flex-direction: column;align-items: center;justify-content: center;flex-shrink: 0;box-shadow: 0px 0px 1px 1px #aaa;">
        <img src="img/宇通公交车全彩屏.png" style="width: 100%;height: 280px;" alt="">
        <div style="width: 100%;height: 60px;display: flex;align-items: center;">
          <span style="font-size: medium;margin-left: 25px;">宇通公交车全彩屏</span>
        </div>
      </div>
      <!-- 5 -->
      <div
              style="margin-left: 5%; width: 28%;height: 340px;display: flex;flex-direction: column;align-items: center;justify-content: center;flex-shrink: 0;box-shadow: 0px 0px 1px 1px #aaa;">
        <img src="img/智利.jpg" style="width: 100%;height: 280px;" alt="">
        <div style="width: 100%;height: 60px;display: flex;align-items: center;">
          <span style="font-size: medium;margin-left: 25px;">智利</span>
        </div>
      </div>
      <!-- 6 -->
      <div
              style="margin-left: 5%; width: 28%;height: 340px;display: flex;flex-direction: column;align-items: center;justify-content: center;flex-shrink: 0;box-shadow: 0px 0px 1px 1px #aaa;">
        <img src="img/郑州安装.jpg" style="width: 100%;height: 280px;" alt="">
        <div style="width: 100%;height: 60px;display: flex;align-items: center;">
          <span style="font-size: medium;margin-left: 25px;">郑州安装</span>
        </div>
      </div>
    </div>
  </div>


  <!-- 产品优势标题 -->
  <div
          style="width: 1920px;height: 180px;background-color: white;display: flex;align-items: center;justify-content: center;flex-direction: column;margin-top: 40px;">
    <span style="font-size: 150px;font-weight: 600; color: #f0f0f0;">ADVANCES</span>
    <!-- 绿色 -->
    <span
            style="align:center;color: #4ca41f;font-weight: 500;z-index: 2;font-size: 30px; margin-top: -70px;">产品优势</span>
  </div>

  <!-- 产品优势 -->
  <div
          style="width: 1920px;display: flex;align-items: center;justify-content: center;flex-direction: column;margin-top: 60px;">
    <div
            style="width: 90%;display: flex;align-items: center;justify-content: center;flex-direction: column;box-shadow: 0px 0px 1px 1px #aaa;">
      <!-- 第一行 -->
      <div
              style="width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: row;">
        <!-- 1 -->
        <div
                style="width: 27%;height: 370px;display: flex;flex-direction: column;align-items: center;justify-content: center;">
          <img src="img/one.png" style="max-width: 70%;max-height: 290px;width: auto;height: auto;"
               alt="">
          <div
                  style="width: 100%;height: 80px;display: flex;align-items: center;justify-content: center;">
								<span
                                        style="font-size: 30px;font-weight: 600;margin-left: 25px;display: flex;align-items: center;">功耗全行业最低</span>
          </div>
        </div>
        <!-- 分割线 -->
        <div style="width: 4px;height: 160px;background-color: #f0f0f0;"></div>
        <!-- 2 -->
        <div
                style="width: 27%;height: 370px;display: flex;flex-direction: column;align-items: center;justify-content: center;">
          <img src="img/two.png" style="max-width: 70%;max-height: 290px;width: auto;height: auto;"
               alt="">
          <div
                  style="width: 100%;height: 80px;display: flex;align-items: center;justify-content: center;">
								<span
                                        style="font-size: 30px;font-weight: 600;margin-left: 25px;display: flex;align-items: center;">超长寿命</span>
          </div>
        </div>
        <!-- 分割线 -->
        <div style="width: 4px;height: 160px;background-color: #f0f0f0;"></div>
        <!-- 3 -->
        <div
                style="width: 27%;height: 370px;display: flex;flex-direction: column;align-items: center;justify-content: center;">
          <img src="img/three.png" style="max-width: 70%;max-height: 290px;width: auto;height: auto;"
               alt="">
          <div
                  style="width: 100%;height: 80px;display: flex;align-items: center;justify-content: center;">
								<span
                                        style="font-size: 30px;font-weight: 600;margin-left: 25px;display: flex;align-items: center;">抗震性好</span>
          </div>
        </div>
      </div>
      <!-- 第二行 -->
      <div
              style="width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: row;">
        <!-- 4 -->
        <div
                style="width: 27%;height: 370px;display: flex;flex-direction: column;align-items: center;justify-content: center;">
          <img src="img/four.png" style="max-width: 70%;max-height: 290px;width: auto;height: auto;"
               alt="">
          <div
                  style="width: 100%;height: 80px;display: flex;align-items: center;justify-content: center;">
								<span
                                        style="font-size: 30px;font-weight: 600;margin-left: 25px;display: flex;align-items: center;">具有自主专利的面罩设计</span>
          </div>
        </div>
        <!-- 分割线 -->
        <div style="width: 4px;height: 160px;background-color: #f0f0f0;"></div>
        <!-- 5 -->
        <div
                style="width: 27%;height: 370px;display: flex;flex-direction: column;align-items: center;justify-content: center;">
          <img src="img/five.png" style="max-width: 70%;max-height: 290px;width: auto;height: auto;"
               alt="">
          <div
                  style="width: 100%;height: 80px;display: flex;align-items: center;justify-content: center;">
								<span
                                        style="font-size: 30px;font-weight: 600;margin-left: 25px;display: flex;align-items: center;">超轻,超薄</span>
          </div>
        </div>
        <!-- 分割线 -->
        <div style="width: 4px;height: 160px;background-color: #f0f0f0;"></div>
        <!-- 6 -->
        <div
                style="width: 27%;height: 370px;display: flex;flex-direction: column;align-items: center;justify-content: center;">
          <img src="img/six.png" style="max-width: 70%;max-height: 290px;width: auto;height: auto;"
               alt="">
          <div
                  style="width: 100%;height: 80px;display: flex;align-items: center;justify-content: center;">
								<span
                                        style="font-size: 30px;font-weight: 600;margin-left: 25px;display: flex;align-items: center;">自定义的多语言字体</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 分割线 -->
  <div style="width: 1920px;height: 2px;background-color: #999;margin-top: 80px;"></div>
  <!-- 留言板 -->
  <div
          style="width: 1920px;display: flex;align-items: center;justify-content: center;flex-direction: column;background-color: #f0f0f0;">
    <div
            style="width: 90%;display: flex;align-items: center;justify-content: center;flex-direction: column;">
      <div style="width: 100%;display: flex;flex-direction: row;">
        <!-- 信息 -->
        <div style="width: 30%;display: flex;flex-direction: column;margin-left: 5%;">
          <span style="font-size: 24px;font-weight: 550;margin-top: 35px;">深圳市中智谷电子科技有限公司</span>
          <span style="font: 20px;margin-top: 45px;color: #999;">地址:北京市朝阳区三元桥时间国际8号楼</span>
          <span style="font: 20px;margin-top: 5px;color: #999;">电话:0086-0755-29080552</span>
          <span style="font: 20px;margin-top: 5px;color: #999;">邮箱:info@ledzzg.com</span>
          <span style="font: 20px;margin-top: 5px;color: #999;">传真:0086-0755-29080595</span>
        </div>
        <!-- 解决方案 -->
        <div style="width: 15%;display: flex;flex-direction: column;margin-left: 5%;">
							<span style="font-size: 22px;font-weight: 550;margin-top: 35px;color: #666;"
                                  onclick="window.location.href= 'solution.html';return false">解决方案</span>
          <span style="font: 20px;margin-top: 25px;color: #000;">方案一</span>
          <span style="font: 20px;margin-top: 15px;color: #000;">方案二</span>
          <span style="font: 20px;margin-top: 15px;color: #000;">方案三</span>
          <span style="font: 20px;margin-top: 15px;color: #000;">方案四</span>
          <span style="font: 20px;margin-top: 15px;color: #000;">方案五</span>
        </div>
        <!-- 产品中心 -->
        <div style="width: 15%;display: flex;flex-direction: column;margin-left: 5%;">
							<span style="font-size: 22px;font-weight: 550;margin-top: 35px;color: #666;"
                                  onclick="window.location.href= 'products.html';return false">产品中心</span>
          <span style="font: 20px;margin-top: 25px;color: #000;">LED路线屏</span>
          <span style="font: 20px;margin-top: 15px;color: #000;">LED显示屏</span>
          <span style="font: 20px;margin-top: 15px;color: #000;">GPS报站器&控制盒</span>
          <span style="font: 20px;margin-top: 15px;color: #000;">LED屏配件</span>
        </div>
        <!-- 新闻资讯 -->
        <!-- 关于我们 -->
        <div style="width: 15%;display: flex;flex-direction: column;margin-left: 5%;">
							<span style="font-size: 22px;font-weight: 550;margin-top: 35px;color: #999;"
                                  onclick="window.location.href= 'news.html';return false">新闻资讯</span>
          <span style="font-size: 22px;font-weight: 550;margin-top: 35px;color: #999;"
                onclick="window.location.href= 'about.html';return false">关于我们</span>
        </div>
      </div>

      <!-- 关注我们 -->
      <div style="width: 90%; display: flex;flex-direction: column;margin-top: 10px;">
        <span style="font-size: 21px;color: #666;font-weight: 600;">关注我们</span>
        <div style="display: flex;flex-direction: row;align-items: center; margin-top: 15px;">
          <img src="img/weixin.png" style="width: 45px;" alt="">
          <img src="img/weibo.png" style="width: 50px;margin-left: 20px;" alt="">
          <img src="img/weibo.png" style="width: 50px;margin-left: 20px;" alt="">
          <img src="img/weibo.png" style="width: 50px;margin-left: 20px;" alt="">
        </div>
      </div>

      <!-- 留言区域 -->
      <div style="font-size: medium;font-weight: 600;color: #999;">联系我们</div>
      <form action="http://43.142.136.160:9797/sendMail" method="post"
            style="margin-top: 30px;width: 95%;margin-left: 5%;">
						<textarea placeholder="请在此输入留言内容，我们会尽快联系你(必填)" type="text"
                                  style="width: 100%;height: 90px;font-size: small;border: 1px solid #aaa;border-radius: 10px;padding-left: 10px;padding-top: 5px;"
                                  name="message"></textarea>
        <div style="width: 100%;display: flex;flex-direction: row;margin-top: 40px;">
          <input type="text" placeholder="姓名"
                 style="width: 20%;height: 25px;padding-left: 9px; margin-left: 0px;" name="name" id="">
          <input type="text" placeholder="电话（必填）"
                 style="width: 20%;height: 25px;padding-left: 9px; margin-left: 30px;" name="tel" id="">
          <input type="text" placeholder="邮箱"
                 style="width: 20%;height: 25px;padding-left: 9px; margin-left: 30px;" name="mail" id="">
          <input type="text" placeholder="地址"
                 style="width: 20%;height: 25px;padding-left: 9px; margin-left: 30px;" name="location"
                 id="">
        </div>
        <div
                style="width: 100%;display: flex;align-items: center;justify-content: center;margin-top: 30px;">
          <input type="submit" value="提交"
                 style="background-color: #4ca41f;color: white;width: 95px;height: 35px;display: flex;align-items: center;justify-content: center;border: none;border-radius: 5px;align:center;"
                 name="post" id="">
        </div>
      </form>
    </div>

    <!-- 标识 -->
    <div style="display: flex;align-items: center;justify-content: center;width: 100%;height: 40px;">
					<span style="font-size: small;">Copyright © 深圳市中智谷电子科技有限公司 All Rights Reserved.
						粤ICP备13088611号-1</span>
    </div>
  </div>



</div>

<div style="width: 100%;height: 100px;"></div>

<script>
  // 解决方案鼠标悬停下拉框
  var solutionBtn = document.getElementById('solutionBtn');
  var gameTop = document.getElementById('top')
  var solutionCanverRoot = document.getElementById('solutionCanverRoot');
  var soulutionCanverList = document.getElementById('soulutionCanver')
  var soulutionCanverI = document.getElementById('soulutionCanverLi')

  // 鼠标移入，出现下拉菜单
  solutionBtn.onmouseenter = function() {
    console.log("鼠标移入");
    solutionCanverRoot.style.display = 'flex';
  }
  // 鼠标移除，菜单消失
  solutionBtn.onmouseleave = function() {
    solutionCanverRoot.style.display = 'none';
  }

  // 鼠标移入下拉框
  soulutionCanver.onmouseenter = function() {
    solutionCanverRoot.style.display = 'flex';
  }
  soulutionCanver.onmouseleave = function() {
    solutionCanverRoot.style.display = 'none';0
  }

  // 鼠标移入，背景变色
  // 事件委托   子事父做
  soulutionCanverList.onmouseover = function(e) {
    console.log("ul移入了");

    // 排他思想
    if (e.target.nodeName == 'LI') {
      for (var i = 0; i < soulutionCanverI.length; i++) {
        this.children[i].style.color = '#4ca41f'
        console.log("移入了");

      }
      e.target.style.color = 'black'
    }
  }


  // 产品中心鼠标悬停下拉框
  var centerBtn = document.getElementById('centerBtn');
  var gameTop = document.getElementById('top')
  var centerCanverRoot = document.getElementById('centerCanverRoot');
  var soulutionCanverList = document.getElementById('soulutionCanver')
  var soulutionCanverI = document.getElementById('soulutionCanverLi')

  // 鼠标移入，出现下拉菜单
  centerBtn.onmouseenter = function() {
    console.log("鼠标移入");
    centerCanverRoot.style.display = 'flex';
  }
  // 鼠标移除，菜单消失
  centerBtn.onmouseleave = function() {
    centerCanverRoot.style.display = 'none';
  }

  // 鼠标移入下拉框
  centerCanver.onmouseenter = function() {
    centerCanverRoot.style.display = 'flex';
  }
  centerCanver.onmouseleave = function() {
    centerCanverRoot.style.display = 'none';
  }

  // 鼠标移入，背景变色
  // 事件委托   子事父做
  soulutionCanverList.onmouseover = function(e) {
    console.log("ul移入了");

    // 排他思想
    if (e.target.nodeName == 'LI') {
      for (var i = 0; i < soulutionCanverI.length; i++) {
        this.children[i].style.color = '#4ca41f'
        console.log("移入了");

      }
      e.target.style.color = 'black'
    }
  }

  var esico = document.getElementById('icolist').getElementsByTagName('li');
  var eicolist = document.querySelector('#icolist');
  var eimglist = document.querySelector('#imglist');
  var etest = document.querySelector('#test');
  var eprev = document.querySelector('.prev');
  var enext = document.querySelector('.next');
  var left = 0;
  var timer;
  esico[2].style.backgroundColor = '#4ca41f';
  run();

  function run() {
    if (left <= -7680) {
      left = 0;
    }
    var m = Math.floor(-left / 1920);
    imglist.style.marginLeft = left + 'px';
    var n = (left % 1920 == 0) ? n = 1200 : n = 6;
    left -= 10;
    icochange(m);
    timer = setTimeout(run, n);
  }

  function icochange(m) {
    for (let index = 0; index < esico.length; index++) {
      esico[index].style.backgroundColor = '';
    }
    if (m < esico.length) {
      esico[m].style.backgroundColor = '#4ca41f';
    }
  }

  function imgchange(n) {
    let lt = -(n * 800)
    imglist.style.marginLeft = lt + 'px';
    left = lt;
  }
  eprev.onclick = function() {
    let prevgo = Math.floor(-left / 800) - 1;
    if (prevgo == -1) {
      prevgo = 3;
    }
    imgchange(prevgo);
    icochange(prevgo);
  }
  enext.onclick = function() {
    let nextgo = Math.floor(-left / 800) + 1;
    if (nextgo == 4) {
      nextgo = 0;
    }
    imgchange(nextgo);
    icochange(nextgo);
  }
  eicolist.onclick = function() {
    var tg = event.target;
    let ico = tg.innerHTML - 1;
    imgchange(ico);
    icochange(ico);
  }
  eimglist.onmouseover = function() {
    clearTimeout(timer);
  }
  eimglist.onmouseout = function() {
    run();
  }
</script>


</body>

</html>
